<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				font-size: 12px;
			}
			
			a {
				color: #999;
				text-decoration: none;
			}
			
			body {
				background: #fff url(../images/bg.jpg) no-repeat;
			}
			
			ul {
				list-style: none;
			}
			
			.pos {
				position: absolute;
			}
			
			#menu {
				left: 590px;
				top: 5px;
			}
			
			#menu li {
				display: block;
				height: 20px;
				line-height: 20px;
				background-color: #fff;
				padding: 4px;
			}
		</style>
	</head>

	<body>
		<div id="menu" class="pos">
			<a href="#">我的当当</a>
			<ul id="menu-ul" style="display:none;">
				<li>
					<a href="#">我的订单</a>
				</li>
				<li>
					<a href="#">我的收藏</a>
				</li>
				<li>
					<a href="#">我的礼品卡</a>
				</li>
				<li>
					<a href="#">我的积分</a>
				</li>
				<li>
					<a href="#">我的余额</a>
				</li>
			</ul>
		</div>
		<script src="../js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#menu").mouseover(function() {
					$("#menu").css("border", "1px solid #EE7304");
					$("#menu-ul").show();
				}).mouseout(function() {
					$("#menu").css("border", "none");
					$("#menu-ul").hide();
				})
			});
		</script>
	</body>

</html>